<template>
  <div class="content">
    <a-row type="flex" style="margin-bottom:30px">
      <div>总输入</div>
      <a-textarea v-model="inputAll" :auto-size="{ minRows: 3 }" style="width:90%" />
    </a-row>

    <a-modal
      v-model="modelShow"
      title="Modal"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
    >
      <a-textarea v-model="json" :auto-size="{ minRows: 3 }" />
    </a-modal>
    <a-row :gutter="20">
      <a-col span="8">
        <div class="binding">
          <div class="bindingbtn">
            <span>{{ zs1 }}</span>
            <input type="text" v-model="input1" style="width: 80%;" />
            <a-row>
              <a-button @click="changeModelShow('1')">上传json</a-button>
              <a-input
                placeholder="注释"
                v-model="zs1"
                style="width: 19%;"
              ></a-input>
            </a-row>
          </div>
          <div v-show="isshow1">
            <p v-for="item in selectCitys1" @click="clickItem(item, 1)">
              {{ item }}
            </p>
          </div>
        </div>
      </a-col>

      <a-col span="8">
        <div class="binding">
          <div class="bindingbtn">
            <span>{{ zs2 }}</span>
            <input type="text" v-model="input2" style="width: 80%;" />
            <a-row>
              <a-button @click="changeModelShow('2')">上传json</a-button>
              <a-input
                placeholder="注释"
                v-model="zs2"
                style="width: 19%;"
              ></a-input>
            </a-row>
          </div>
          <div v-show="isshow2">
            <p v-for="item in selectCitys2" @click="clickItem(item, 2)">
              {{ item }}
            </p>
          </div>
        </div>
      </a-col>

      <a-col span="8">
        <div class="binding">
          <div class="bindingbtn">
            <span>{{ zs3 }}</span>
            <input type="text" v-model="input3" style="width: 80%;" />
            <a-row>
              <a-button @click="changeModelShow('3')">上传json</a-button>
              <a-input
                placeholder="注释"
                v-model="zs3"
                style="width: 19%;"
              ></a-input>
            </a-row>
          </div>
          <div v-show="isshow3">
            <p v-for="item in selectCitys3" @click="clickItem(item, 3)">
              {{ item }}
            </p>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import chuJ from "@/common/json/a2.json";
export default {
  data() {
    return {
      inputAll: "",
      json: "",
      modelShow: false,
      modelIndex: "",

      isshow1: true,
      input1: "", //4
      zs1: "",
      jsonArry1: [], //6
      selectCitys1: [], //5

      isshow2: true,
      input2: "", //4
      zs2: "",
      jsonArry2: [], //6
      selectCitys2: [], //5

      isshow3: true,
      input3: "", //4
      zs3: "",
      jsonArry3: [], //6
      selectCitys3: [], //5
    };
  },
  created() {
    // console.log("111");
    // console.log(chuJ);
    // const keyify = (obj, prefix = "") =>
    //   Object.keys(obj).reduce((res, el) => {
    //     //   debugger
    //     if (Array.isArray(obj[el])) {
    //       return res;
    //     } else if (typeof obj[el] === "object" && obj[el] !== null) {
    //       return [...res, ...keyify(obj[el], prefix + el + ".")];
    //     } else {
    //       return [...res, prefix + el];
    //     }
    //   }, []);
    // this.jsonArry1 = keyify(chuJ);
    // console.log(this.jsonArry1);
  },
  methods: {
    keyify() {},

    clickItem(item, num) {
      this.inputAll = this.inputAll + item;
      if (num == 1) {
        this.input1 = "";
        this.selectCitys1 = [];
      } else if (num == 2) {
        this.input2 = "";
        this.selectCitys2 = [];
      }else if (num == 3) {
        this.input3 = "";
        this.selectCitys3 = [];
      }
    },
    changeModelShow(index) {
      this.modelIndex = index;
      this.modelShow = true;
    },
    hideModal() {
      console.log(this.json);
      const keyify = (obj, prefix = "") =>
        Object.keys(obj).reduce((res, el) => {
          //   debugger
          if (Array.isArray(obj[el])) {
            return [...res, ...keyify(obj[el][0], prefix + el + "[@].")];
          } else if (typeof obj[el] === "object" && obj[el] !== null) {
            return [...res, ...keyify(obj[el], prefix + el + ".")];
          } else {
            return [...res, prefix + el];
          }
        }, []);
      // Object(this.json)
      if (this.modelIndex == 1) {
        this.jsonArry1 = keyify(JSON.parse(this.json));
      } else if (this.modelIndex == 2) {
        this.jsonArry2 = keyify(JSON.parse(this.json));
      }else if (this.modelIndex == 3) {
        this.jsonArry3 = keyify(JSON.parse(this.json));
      }

      this.modelShow = false;
    },
  },
  watch: {
    input1: function (val, oldVal) {
      console.log(val);
      if (val.length == 0) {
        this.isshow1 = false;
      } else {
        this.isshow1 = true;
        var jsonArry1 = [];
        this.jsonArry1.forEach((item, index) => {
          if (item.indexOf(val) >= 0) {
            jsonArry1.unshift(item);
            console.log(val);
          }
        });
        this.selectCitys1 = jsonArry1;
      }
    },

    input2: function (val, oldVal) {
      console.log(val);
      if (val.length == 0) {
        this.isshow2 = false;
      } else {
        this.isshow2 = true;
        var jsonArry2 = [];
        this.jsonArry2.forEach((item, index) => {
          if (item.indexOf(val) >= 0) {
            jsonArry2.unshift(item);
            console.log(val);
          }
        });
        this.selectCitys2 = jsonArry2;
      }
    },

        input3: function (val, oldVal) {
      console.log(val);
      if (val.length == 0) {
        this.isshow3 = false;
      } else {
        this.isshow3 = true;
        var jsonArry3 = [];
        this.jsonArry3.forEach((item, index) => {
          if (item.indexOf(val) >= 0) {
            jsonArry3.unshift(item);
            console.log(val);
          }
        });
        this.selectCitys3 = jsonArry3;
      }
    },
  },
};
</script>
<style scoped>
.content {
  padding: 30px;
}
/* ul {
  border: 1px solid red;
}
li {
  height: 10px;
  line-height: 10px;
  border-bottom: 1px solid #ddd;
}
.bindingbtn input {
  border: 1px solid #333;
  height: 44px;
  line-height: 44px;
} */
</style>